<template>
  <div class="main">
    <p>用户名:</p>
    <input-validate
      v-model="name"
      placeholder="请输入新的用户名称"
      v-validate="'required'"
      name="name"
      type="text"
      data-vv-value-path="innerValue"
      data-vv-validate-on="input"
      data-vv-as="新的用户名称"
      :error="errors.first('name')"
    >
    </input-validate>
    <md-button type="primary" class="save" round @click="saveBtn"
      >保存</md-button
    >
  </div>
</template>

<script>
import { InputItem, Field, Button } from "mand-mobile";
import inputValidate from "@/components/input-validate/index";
export default {
  name: "changeUsername",
  components: {
    inputValidate,
    [InputItem.name]: InputItem,
    [Field.name]: Field,
    [Button.name]: Button
  },
  data() {
    return {
      name: ""
    };
  },
  methods: {
    saveBtn() {
      this.$ajax
        .post(this.$api.saveName, {
          username: this.name
        })
        .then(() => {
          this.$toast.succeed("用户名修改成功！");
          this.$router.go(-1);
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  }
};
</script>

<style scoped lang="stylus">
.main{
  height: 100%;
  background-color #ffffff;
  padding 29px 24px 0;
}
.save{
  width 43%;
  height: 80px;
  margin 104px auto 0;
  background-color #317EB9;
}
.md-button.primary::after{
  border none;
}
</style>
